<template>
    <section class="party-box">
        <!--点开始转动大转盘音乐-->
        <audio ref="party" loop>
            <source src="https://cdn.13yu.com/file/party.mp3" type="audio/mp3">
        </audio>
        <!--中奖人员音乐-->
        <audio ref="party_win">
            <source src="https://cdn.13yu.com/file/party_win.mp3" type="audio/mp3">
        </audio>
        <!--大奖开奖音效-->
        <audio ref="party_process">
            <source src="https://cdn.13yu.com/file/party_process.mp3" type="audio/mp3">
        </audio>
        <audio ref="party_win_big">
            <source src="http://cdn.13yu.com/file/party_goodluck.mp3" type="audio/mp3">
        </audio>
        <audio ref="party_win_small">
            <source src="https://cdn.13yu.com/file/party_win_big.mp3" type="audio/mp3">
        </audio>
        <div v-show="!showPrize">
            <!--剩余奖品数-->
            <div style="color:yellow;font-size: 3.2em;padding: 20px;text-align: center;position: absolute;width: 100%;">
                <svg style="vertical-align: text-top;margin-right: 10px;" t="1736141480262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4374" width="40" height="40"><path d="M815.402667 54.4A35.84 35.84 0 0 0 787.84 42.666667H236.309333A40.234667 40.234667 0 0 0 196.906667 81.813333v352a318.656 318.656 0 0 0 90.602666 222.954667 306.922667 306.922667 0 0 0 224.490667 89.984 323.221333 323.221333 0 0 0 224.512-89.984 302.549333 302.549333 0 0 0 90.602667-222.933333V81.792a35.370667 35.370667 0 0 0-11.733334-27.392z m-66.944 379.392a212.352 212.352 0 0 1-70.826667 164.117333 236.864 236.864 0 0 1-165.226667 70.314667 215.253333 215.253333 0 0 1-165.248-70.314667 233.642667 233.642667 0 0 1-70.826666-164.117333V120.896H749.013333l-0.533333 312.896z" p-id="4375" fill="#f4ea2a"></path><path d="M1012.202667 210.858667a35.84 35.84 0 0 0-27.584-11.733334H748.330667v391.125334a277.845333 277.845333 0 0 0 196.906666-78.186667c47.232-46.890667 74.837333-136.917333 78.762667-273.813333a42.048 42.048 0 0 0-11.797333-27.392z m-122.090667 246.442666a225.173333 225.173333 0 0 1-63.04 43.029334v-222.933334h114.218667c-7.850667 93.866667-23.616 152.512-51.2 179.904zM39.381333 199.146667a35.84 35.84 0 0 0-27.584 11.712A42.048 42.048 0 0 0 0 238.250667C3.925333 371.2 31.488 465.066667 78.741333 512.064a271.253333 271.253333 0 0 0 196.928 78.186667V199.146667H39.381333zM196.906667 277.333333v222.933334a164.992 164.992 0 0 1-63.04-43.029334C106.325333 429.866667 90.56 371.2 82.709333 277.333333h114.218667z m354.474666 391.125334h-78.762666v234.666666h78.762666v-234.666666z m-196.928 234.666666h315.093334c21.76 0 39.381333 17.493333 39.381333 39.104A39.253333 39.253333 0 0 1 669.568 981.333333h-315.093333a39.253333 39.253333 0 0 1-39.381334-39.104 39.253333 39.253333 0 0 1 39.381334-39.104zM520.832 261.248l31.914667 62.122667c1.429333 2.773333 4.202667 4.693333 7.402666 5.141333l71.424 9.962667c8.042667 1.130667 11.285333 10.624 5.461334 16.106666l-51.669334 48.384a9.28 9.28 0 0 0-2.837333 8.362667l12.16 68.266667c1.408 7.722667-7.04 13.610667-14.229333 9.962666l-63.893334-32.234666a10.176 10.176 0 0 0-9.173333 0l-63.829333 32.234666c-7.232 3.648-15.658667-2.24-14.250667-9.941333l12.16-68.288a9.194667 9.194667 0 0 0-2.816-8.362667l-51.669333-48.362666c-5.845333-5.44-2.624-14.976 5.461333-16.106667l71.402667-9.941333c3.2-0.448 5.973333-2.368 7.402666-5.162667l31.936-62.122667a10.026667 10.026667 0 0 1 17.642667-0.021333z" p-id="4376" fill="#f4ea2a"></path></svg>
                <span>奖品({{prizeNum}}/{{prizeTotal}})</span>
            </div>
            <div style="position: absolute;left: 20px;bottom: 20px;">
                <el-button v-if="!isPlay" type="danger" @click="playBtn(1)" :disabled="prizeTotal - prizeNum <= 0">
                    <svg t="1736141480262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4374" width="14" height="14"><path d="M815.402667 54.4A35.84 35.84 0 0 0 787.84 42.666667H236.309333A40.234667 40.234667 0 0 0 196.906667 81.813333v352a318.656 318.656 0 0 0 90.602666 222.954667 306.922667 306.922667 0 0 0 224.490667 89.984 323.221333 323.221333 0 0 0 224.512-89.984 302.549333 302.549333 0 0 0 90.602667-222.933333V81.792a35.370667 35.370667 0 0 0-11.733334-27.392z m-66.944 379.392a212.352 212.352 0 0 1-70.826667 164.117333 236.864 236.864 0 0 1-165.226667 70.314667 215.253333 215.253333 0 0 1-165.248-70.314667 233.642667 233.642667 0 0 1-70.826666-164.117333V120.896H749.013333l-0.533333 312.896z" p-id="4375" fill="#f4ea2a"></path><path d="M1012.202667 210.858667a35.84 35.84 0 0 0-27.584-11.733334H748.330667v391.125334a277.845333 277.845333 0 0 0 196.906666-78.186667c47.232-46.890667 74.837333-136.917333 78.762667-273.813333a42.048 42.048 0 0 0-11.797333-27.392z m-122.090667 246.442666a225.173333 225.173333 0 0 1-63.04 43.029334v-222.933334h114.218667c-7.850667 93.866667-23.616 152.512-51.2 179.904zM39.381333 199.146667a35.84 35.84 0 0 0-27.584 11.712A42.048 42.048 0 0 0 0 238.250667C3.925333 371.2 31.488 465.066667 78.741333 512.064a271.253333 271.253333 0 0 0 196.928 78.186667V199.146667H39.381333zM196.906667 277.333333v222.933334a164.992 164.992 0 0 1-63.04-43.029334C106.325333 429.866667 90.56 371.2 82.709333 277.333333h114.218667z m354.474666 391.125334h-78.762666v234.666666h78.762666v-234.666666z m-196.928 234.666666h315.093334c21.76 0 39.381333 17.493333 39.381333 39.104A39.253333 39.253333 0 0 1 669.568 981.333333h-315.093333a39.253333 39.253333 0 0 1-39.381334-39.104 39.253333 39.253333 0 0 1 39.381334-39.104zM520.832 261.248l31.914667 62.122667c1.429333 2.773333 4.202667 4.693333 7.402666 5.141333l71.424 9.962667c8.042667 1.130667 11.285333 10.624 5.461334 16.106666l-51.669334 48.384a9.28 9.28 0 0 0-2.837333 8.362667l12.16 68.266667c1.408 7.722667-7.04 13.610667-14.229333 9.962666l-63.893334-32.234666a10.176 10.176 0 0 0-9.173333 0l-63.829333 32.234666c-7.232 3.648-15.658667-2.24-14.250667-9.941333l12.16-68.288a9.194667 9.194667 0 0 0-2.816-8.362667l-51.669333-48.362666c-5.845333-5.44-2.624-14.976 5.461333-16.106667l71.402667-9.941333c3.2-0.448 5.973333-2.368 7.402666-5.162667l31.936-62.122667a10.026667 10.026667 0 0 1 17.642667-0.021333z" p-id="4376" fill="#f4ea2a"></path></svg>
                    开始摇奖</el-button>
                <el-button v-else type="danger" @click="playBtn(0)" class="el-icon-video-pause">&nbsp;停止</el-button>
                <el-button type="danger" @click="openUserBtn" class="el-icon-user-solid" plain>&nbsp;获奖名单</el-button>
                <el-button type="warning" @click="resetBtn" :loading="resetLoading" v-if="debug">全部重置</el-button>
            </div>
            <div id="myCanvasContainer">
                <canvas width="300" height="300" id="myCanvas" ref="canvas">
                    <p>换个现代浏览器吧！</p>
                </canvas>
            </div>
            <div id="tags">
                <ul>
                    <li v-for="(item, index) in members" :key="index">
                        <a href="javascript:void(0)" style="font-size: 40px">{{item.username}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div v-if="showPrize && users.length > 0">
            <div style="position: absolute;top:10em;margin: 2em;border: .2em solid wheat;border-radius: 4px;background-color: #ed40141f;width: 22em;">
                <div style="text-align:center;width: 100%;height: 60px;line-height: 60px;color: #ed4014;background-color: wheat;font-size:3.2em;">幸运名单</div>
                <div v-for="(item, index) in users" :key="index" style="margin: 15px 0;padding-left: 4em;">
                    <el-button type="text" style="color: white;font-size: 2.8em;">{{item.name}}</el-button>
                    <svg v-if="index == selectIndex && item.status == 0" style="vertical-align: bottom;margin-left: 1em;" t="1736227303212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21678" width="32" height="32"><path d="M151.466667 162.133333L328.533333 810.666667c2.133333 6.4 10.666667 8.533333 14.933334 2.133333l174.933333-292.266667c0-2.133333 2.133333-2.133333 2.133333-2.133333l292.266667-174.933333c6.4-4.266667 4.266667-12.8-2.133333-14.933334L162.133333 151.466667c-6.4-2.133333-12.8 4.266667-10.666666 10.666666z" fill="#FAAD14" p-id="21679"></path><path d="M870.4 761.6l-108.8 108.8c-4.266667 4.266667-8.533333 4.266667-12.8 0L394.666667 514.133333l121.6-121.6 356.266666 356.266667c2.133333 4.266667 2.133333 10.666667-2.133333 12.8z" fill="#FAAD14" p-id="21680"></path></svg>
                    <svg v-else-if="item.status == 1" style="vertical-align:sub;margin-left: 1em;" t="1736150586242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6729" width="32" height="32"><path d="M927.9 224.5c0-12.8-9.6-22.8-21.6-22.8h-92.4v-14.8c0-18.8-0.8-38.4-2.4-60.4-0.8-12-10.4-21.3-21.6-21.3H265.3c-11.2 0-20.8 9.3-21.5 21.3-1.6 23.6-2.4 42.4-2.4 61.2v14.1h-90.9c-11.6-0.1-21.6 9.9-21.6 22.3-6 130.8 47.6 274.5 181.4 300.2 1.4 0.7 2.9 1 4.4 0.8 1.3 0.1 2.7-0.1 4-0.4 20.8 37.6 44.4 69.2 70.8 93.6 34 31.6 70.8 50.8 110 57.2l6.4 1.2v182.9H380.5c-11.6 0-21.6 10.4-21.6 22.8 0 12 8.8 22.6 20.8 23.4h294.5c12-0.1 21.7-9.9 21.6-21.9v-0.3c0-12.8-9.6-22.8-21.6-22.8H549v-183l6.4-1.2c39.6-6.4 76.4-25.6 110.4-57.2 26-24.4 49.6-55.6 70.8-94 1.8 0.5 3.7 0.8 5.6 0.8 1.4 0 2.7-0.3 4-0.8 134.1-26.5 187.7-170.1 181.7-300.9z m-755.1 23.2h70.9c6.4 83.2 23.6 159.7 51.2 226.9-60.8-21.3-122.9-99.3-122.1-226.9z m429.7 199.9L528.4 411l-74.1 36.6 11.9-81.8-57.8-59.2 81.5-13.9 38.4-73.2 38.4 73.2 81.5 13.9-57.7 59.1 12 81.9z m157.8 27.3c11.7-28.1 21.3-57 28.8-86.4 0 0 0.4 0.4 0.4-0.4 10.4-42.7 17.5-86.2 21.2-130l0.4-4 0.4-6.8h72.4c1.2 129.2-62 207.2-123.6 227.6z" p-id="6730" fill="#f4ea2a"></path></svg>
                    <svg v-else-if="item.status == -1" style="vertical-align: bottom;margin-left: 1em;" t="1736228020347" class="icon" viewBox="0 0 1877 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29078" width="32" height="32"><path d="M658.773333 275.626667l-50.346666 30.72c24.746667 27.306667 48.64 53.76 71.68 80.213333-119.466667 13.653333-242.346667 23.04-369.493334 28.16 55.466667-46.933333 103.253333-103.253333 144.213334-168.106667h408.746666V188.586667h-308.053333c-11.946667-30.72-23.893333-58.88-36.693333-84.48l-64 11.093333c13.653333 22.186667 26.453333 46.933333 38.4 73.386667H161.28v58.026666h225.28a704 704 0 0 1-171.52 176.64l16.213333 47.786667c166.4-5.973333 328.533333-18.773333 487.253334-37.546667 21.333333 27.306667 40.96 54.613333 58.026666 80.213334l51.2-35.84c-39.253333-58.026667-95.573333-125.44-168.96-202.24z m-320 230.4v99.84H127.146667v59.733333h209.066666c-10.24 84.48-52.906667 147.626667-127.146666 189.44l46.08 40.96c84.48-51.2 132.266667-128 143.36-230.4h224.426666v228.693333h62.293334V665.6h211.626666v-59.733333h-211.626666v-99.84H622.933333v99.84H401.066667v-99.84H338.773333zM1183.573333 451.413333c26.453333 32.426667 58.026667 75.093333 94.72 128l34.986667-52.053333c-43.52-51.2-87.04-98.133333-129.706667-139.093333V339.626667h112.64V280.746667h-112.64v-166.4H1122.133333v166.4h-133.973333v58.88h132.266667c-29.866667 106.666667-80.213333 201.386667-150.186667 285.013333l27.306667 69.12c52.053333-72.533333 93.866667-153.6 124.586666-244.053333v442.88h61.44V451.413333z m457.386667-226.986666c-20.48 133.12-60.586667 250.88-122.026667 353.28-62.293333-104.106667-98.133333-221.866667-108.373333-353.28h230.4z m-157.866667 407.893333c-58.026667 81.066667-132.266667 151.04-221.866666 210.773333l39.253333 49.493334c86.186667-56.32 159.573333-124.586667 219.306667-205.653334 52.906667 74.24 120.32 143.36 200.533333 206.506667l41.813333-49.493333c-83.626667-62.293333-151.893333-132.266667-206.506666-209.066667 71.68-114.346667 120.32-251.733333 145.066666-411.306667V165.546667h-384v58.88h34.133334c11.946667 149.333333 56.32 285.013333 132.266666 407.893333z" fill="#f4ea2a" p-id="29079"></path></svg>
                    <span v-if="item.prize_id" style="font-size: 25px;color: #f4ea2a;">{{item.prize_id}}</span>
                </div>
                <div style="position: absolute;bottom: -4em;right: 0px;">
                    <el-button v-if="users.length-1 == selectIndex" type="danger" @click="repeatBtn" plain>重新摇奖</el-button>
                    <el-button v-else type="danger" @click="passBtn" plain>放弃</el-button>
                </div>
            </div>
            <div style="position:absolute;top:0em;left:23em;vertical-align: top;margin:.6em 0 0 2em;background-color: #30313396">
                <div style="font-size:3em;margin-left:.5em;color: #cbcaca">有请幸运人：<span style="color:wheat">{{users[selectIndex].name}}</span>，报出你的幸运数字，领取大奖！！！</div>
                <div style="overflow-y: auto;" :style="{height: prizeHeight+'px', width: prizeWidth+'px'}">
                    <table style="width: 100%;height: 100%;text-align: center;table-layout: fixed; border-collapse: collapse;">
                        <tr v-for="(r_num, r_i) in 13" :key="r_i">
                            <td v-for="(c_num, c_i) in 13" :key="c_i">
                                <div v-if="!prizeUser[(r_num-1)*13 + c_num]" class="prize-circle" @click="openBtn((r_num-1)*13 + c_num)">
                                    {{ (r_num-1)*13 + c_num}}
                                </div>
<!--                                <img class="prize-img-circle" v-else :src="prizes[(r_num-1)*13 + c_num].img"/>-->
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!--获奖名单-->
        <div v-if="showUsers">
            <div style="position: absolute;margin:1em;border: .2em solid wheat;border-radius: 4px;background-color: #ed40141f;" :style="{width: windowWidth-25+'px'}">
                <div style="text-align:center;width: 100%;height: 60px;line-height: 60px;color: #ed4014;background-color: wheat;font-size:3.2em;">
                    <el-button type="text" @click="showUsers=false;showPrize=false" style="position: absolute;left: 0px;">
                        <svg style="vertical-align: sub" t="1736307595380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2340" width="48" height="48"><path d="M487.271784 276.48c-7.887568-35.701622-37.638919-13.976216-37.638919-13.976216l-206.737297 175.187027c-45.388108 31.135135-3.182703 54.382703-3.182703 54.382703l203.692973 173.526486c40.683243 29.474595 43.865946-15.498378 43.865946-15.498378v-79.014054c206.737297-63.515676 291.424865 190.685405 291.424865 190.685405 7.749189 13.976216 12.454054 0 12.454054 0 79.982703-381.370811-303.878919-400.051892-303.878919-400.051892v-85.241081z" fill="#ed4014" p-id="2341"></path></svg>
                    </el-button>
                    幸运名单&nbsp;{{prizeNum}}位
                </div>
                <div style="width: 100%;overflow-y:auto;background-color: #e71717bf;" :style="{height: prizeHeight-10+'px'}">
                    <div v-for="(item, prizeId) in prizeUser" :key="prizeId" style="margin: 15px 0;padding-left: 6em;display: inline-block;width: 300px;">
                        <el-button type="text" style="color: white;font-size: 2.8em;">{{item.username}}</el-button>
                        <svg style="vertical-align:sub;margin-left: 1em;" t="1736150586242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6729" width="32" height="32"><path d="M927.9 224.5c0-12.8-9.6-22.8-21.6-22.8h-92.4v-14.8c0-18.8-0.8-38.4-2.4-60.4-0.8-12-10.4-21.3-21.6-21.3H265.3c-11.2 0-20.8 9.3-21.5 21.3-1.6 23.6-2.4 42.4-2.4 61.2v14.1h-90.9c-11.6-0.1-21.6 9.9-21.6 22.3-6 130.8 47.6 274.5 181.4 300.2 1.4 0.7 2.9 1 4.4 0.8 1.3 0.1 2.7-0.1 4-0.4 20.8 37.6 44.4 69.2 70.8 93.6 34 31.6 70.8 50.8 110 57.2l6.4 1.2v182.9H380.5c-11.6 0-21.6 10.4-21.6 22.8 0 12 8.8 22.6 20.8 23.4h294.5c12-0.1 21.7-9.9 21.6-21.9v-0.3c0-12.8-9.6-22.8-21.6-22.8H549v-183l6.4-1.2c39.6-6.4 76.4-25.6 110.4-57.2 26-24.4 49.6-55.6 70.8-94 1.8 0.5 3.7 0.8 5.6 0.8 1.4 0 2.7-0.3 4-0.8 134.1-26.5 187.7-170.1 181.7-300.9z m-755.1 23.2h70.9c6.4 83.2 23.6 159.7 51.2 226.9-60.8-21.3-122.9-99.3-122.1-226.9z m429.7 199.9L528.4 411l-74.1 36.6 11.9-81.8-57.8-59.2 81.5-13.9 38.4-73.2 38.4 73.2 81.5 13.9-57.7 59.1 12 81.9z m157.8 27.3c11.7-28.1 21.3-57 28.8-86.4 0 0 0.4 0.4 0.4-0.4 10.4-42.7 17.5-86.2 21.2-130l0.4-4 0.4-6.8h72.4c1.2 129.2-62 207.2-123.6 227.6z" p-id="6730" fill="#f4ea2a"></path></svg>
                        <span style="font-size: 25px;color: #f4ea2a;">{{item.prize_id}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--礼品展示-->
        <el-dialog v-if="prizes[selectPrizeId]" :title="isLoop ? '' : prizes[selectPrizeId].name" :visible.sync="showGood" top="20px" :close-on-click-modal="false"
                   :close-on-press-escape="false" :show-close="false" :before-close="closeBtn" width="450px" :class="{'el-dialog__headerShow' : !isLoop}">
            <div v-if="isLoop" class="loopNumber">
                {{loopTime == 0 ? "" : loopTime}}
            </div>
            <img v-else :src="prizes[selectPrizeId].img" width="100%" style="object-fit: contain" :style="{'max-height': prizeHeight-200+'px'}"/>
            <div v-if="!isLoop" style="text-align: center">
                <el-button type="danger" class="el-icon-present" @click="closeBtn">&nbsp;领取奖品</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import tagcanvas from "./tagcanvas.min"
import {partyDraw, partyList, partyPrizes, partyReset, partySetPull} from "@/api/party/party";
export default {
    name: "party",
    data() {
        return {
            windowWidth: window.innerWidth,
            windowHeight: window.innerHeight,
            prizeWidth: window.innerWidth-310,
            prizeHeight: window.innerHeight-70,
            isPlay: 0,
            members:[],//所有名单
            users: [],//抽中人员名单
            prizeTotal: 169,//奖品总数
            prizeNum: 0,//已获取的奖品数
            prizeUser: {},//获奖名单
            prizes:[],//奖品列表
            selectIndex: 0,
            selectPrizeId: 0,

            //开奖倒计时
            loopTime: 3,
            isLoop: false,

            resetLoading: false,
            debug: false,
            showPrize: false,
            showGood: false,
            showUsers: false,
        }
    },
    created() {
        if(this.$route.query.debug && this.$route.query.debug == 'on'){
            this.debug = true;
        }
    },
    methods: {
        //获奖名单
        openUserBtn(){
            this.showPrize= true;
            this.showUsers = true;
        },
        resetBtn(){
            this.$prompt('请输入重置口令', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({ value }) => {
                this.resetLoading = true;
                partyReset({password: value}).then((res) =>{
                    this.resetLoading = false;
                    if(res.code !== 0){
                        this.$Message.error("重置口令不正确")
                    }else{
                        this.$Message.success("已全部重置，请重新摇奖");
                        window.location.reload();
                    }
                });
            }).catch(() => {});
        },
        playBtn(isPlay){
            if(isPlay){
                this.isPlay = isPlay;
                this.$refs.party.play();
                TagCanvas.SetSpeed('myCanvas', [5, 1]);
            }else{
                TagCanvas.SetSpeed('myCanvas', [0.09, -0.09]);
                this.isPlay = isPlay;
                this.$refs.party.pause();
                this.$refs.party.currentTime = 0;
                this.$refs.party_win.play();
                //每次获取10名
                this.users = [];
                let num = 10;
                if(this.prizeTotal - this.prizeNum < num){
                    num = this.prizeTotal - this.prizeNum;
                }
                if(this.members.length < num){
                    num = this.members.length;
                }
                for(let i = 0; i < num;i++){
                    let userIndex = Math.floor(Math.random() * this.members.length);//随机获取人员序列
                    this.users.push({name: this.members[userIndex].username, status: 0, prize_id: ""});
                    this.members.splice(userIndex, 1);
                }
                this.selectIndex = 0;
                console.log(this.members, this.users)
                partySetPull({users : this.users}).then((res) =>{
                    this.showPrize = true;
                });
            }
        },
        init() {
            try {
                TagCanvas.Start('myCanvas', 'tags', {
                    textColour: '#f5b87e',
                    dragControl: 1,
                    decel: 0.95,
                    textHeight: 30,
                    minSpeed: 0.22,
                    initial: [0.09, -0.09],
                });
            } catch (e) {
                document.getElementById('myCanvasContainer').style.display = 'none';
            }
        },
        //获取抽奖用户列表
        getUser(){
            partyList({is_pull: 0}).then((res) =>{
                this.members = res.data;
                var canvas = this.$refs.canvas;
                canvas.width = document.body.offsetWidth;
                canvas.height = document.body.offsetHeight;
                this.$nextTick(function () {
                    this.init();
                });
            });
        },
        //获奖名单
        getPrizeUser(){
            partyList({status: 1}).then((res) =>{
                this.prizeNum = res.data.length;
                for(let info of res.data){
                    this.prizeUser[info.prize_id] = info;
                }
                console.log("获奖名单", this.prizeUser)
            });
        },
        //获取奖品列表
        getPrize(){
            partyPrizes().then((res) =>{
                this.prizes = res.data;
            })
        },
        //放弃
        passBtn(){
            this.$confirm(`幸运人：${this.users[this.selectIndex].name}，将放弃此次抽奖机会，请确认?`, "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$set(this.users[this.selectIndex], 'status', -1);
                this.selectIndex += 1;
            }).catch(()=>{});
        },
        //重新摇奖
        repeatBtn(){
            this.users = [];
            this.showPrize = false;
        },
        //开奖
        openBtn(prizeId){
            if(this.users[this.selectIndex].prize_id != ""){
                this.$Message.warning("请重新摇奖");
                return;
            }
            this.$refs.party_process.play();
            this.isLoop = true;
            let that = this;
            if(this.loopTime > 0){
                this.selectPrizeId = prizeId;
                this.showGood = true;
                setTimeout(function (){
                    that.loopTime = that.loopTime - 1;
                    that.openBtn(prizeId);
                }, 1000);
            }else{
                let obj = {
                    prize_id: prizeId,
                    prize_name: this.prizes[prizeId].name,
                    username: this.users[this.selectIndex].name
                };
                partyDraw(obj).then((res) =>{
                    if(res.code === 0){
                        this.isLoop = false;
                        this.loopTime = 3;
                        this.$refs.party_process.pause();
                        this.$refs.party_process.currentTime = 0;
                        if(this.prizes[prizeId].is_big){
                            this.$refs.party_win_big.play();
                        }else{
                            this.$refs.party_win_small.play();
                        }
                        this.getPrizeUser();
                    } else{
                        this.$Message.error(res.msg);
                    }
                });
            }
        },
        closeBtn(){
            if(this.isLoop){
                return;
            }
            this.showGood = false;
            this.$set(this.users[this.selectIndex], "status", 1);
            this.$set(this.users[this.selectIndex], "prize_id", this.selectPrizeId);
            if(this.selectIndex < this.users.length-1){
                this.selectIndex += 1;
            }
            if(this.prizes[this.selectPrizeId].is_big){
                this.$refs.party_win_big.pause();
                this.$refs.party_win_big.currentTime = 0;
            }
        },
    },
    mounted() {
        //获取全员
        this.getUser();
        //获取礼品列表
        this.getPrize();
        //获取中奖名单
        this.getPrizeUser();
    }
}
</script>

<style scoped>
.party-box{
    width: 100%;
    height: 100%;
    background-image: url("https://cdn.13yu.com/image/nianhui_bg.png");
    overflow: hidden;
    background-color: #121936;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.prize-circle{
    display: inline-block;
    width:60px;
    height:60px;
    line-height:60px;
    background-color: #bb2e0a;
    color: white;
    font-weight: bold;
    font-size: 28px;
    border-radius: 60px;
    cursor: pointer;
    perspective: 500px;    /* 透视距离，增加3D效果 */
    transform-style: preserve-3d; /* 让子元素保持3D转换 */
    box-shadow: inset 5px 5px 20px rgba(0,0,0,0.5); /* 内发光效果 */

}
.prize-circle:hover{
    box-shadow: inset 2px 4px 20px #edec45;
}
.prize-img-circle{
    display: inline-block;
    width:60px;
    height:60px;
    line-height:60px;
    object-fit: contain;
    background-color: #0000001a;
    border-radius: 60px;
}
/deep/ .el-dialog{
    background-color: #00000000;
    border: 0.5em solid #220d0e00;
    box-shadow: none;
}
/deep/ .el-dialog__header{
    text-align: center;
}
.el-dialog__headerShow /deep/ .el-dialog__header{
    background-color: brown;
}

/deep/ .el-dialog__title {
    line-height: 38px;
    font-size: 38px;
    color: #fff;
}
/deep/ .el-dialog__body{
    padding: 0;
}
/deep/ .el-dialog__headerbtn .el-dialog__close{
    border-radius: 60px;
    border: 1px solid white;
    font-size: 32px;
    color: white;
}

.loopNumber{
    font-size: 2em;
    text-align: center;
    color: #e6a23c;
    animation: grow 1s infinite;
}

@keyframes grow {
    0% {
        font-size: 2em;
    }
    100% {
        font-size: 35em;
    }
}
</style>
